<template>
  <el-card>
    <el-row align="left">
      <el-col>
        <el-button>生成二维码</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="codeList"
      style="width: 100%"
    >
      <el-table-column
        prop="appId"
        label="appId"
      />
      <el-table-column
        prop="qrcodeType"
        label="二维码类型"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.qrcodeType === 0">体验版二维码</div>
          <div v-else-if="scope.row.qrcodeType === 1">小程序码(UN_LIMIT)</div>
          <div v-else-if="scope.row.qrcodeType === 2">小程序码(LIMIT)</div>
          <div v-else-if="scope.row.qrcodeType === 3">普通二维码(LIMIT)</div>

        </template>
      </el-table-column>

      <el-table-column
        prop="pagePath"
        label="路径"
      />

      <el-table-column
        prop="scene"
        label="场景值"
      />

      <el-table-column
        prop="createTime"
        label="创建时间"
      />

      <el-table-column
        prop="option"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
/* eslint-disable no-console */

import { getQrcodeList, genQrcode } from '@/api/wxapp'
export default {
  name: 'QrcodeMange',
  components: {},
  props: {
    appId: {
      type: String,
      require: true,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      codeList: [],
      pageNum: 1,
      pageSize: 8,
      total: 0
    }
  },
  mounted() {
    this.getCodeList()
  },
  methods: {
    handleCurrentChange(cur) {
      this.pageNum = cur
      this.getCodeList()
    },
    getCodeList() {
      const data = {
        appId: this.appId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      return getQrcodeList(data).then((resp) => {
        this.codeList = resp.data.list
        this.total = resp.data.total
        return resp
      })
    }
  }
}
</script>

<style scoped>

</style>
